<template>
	<div>
		<el-drawer v-model="state.show" title="搜索订单">
			<div class="mar20">
				<el-form label-width="100px">
					<el-form-item label="输入查询内容:">
						<el-input>
							<template #prepend>
								<div style="width: 130px; height: 100%">
									<el-select v-model="state.search.orderNameType" placeholder="请选择" style="margin: 0; height: 100%">
										<el-option label="订单ID" value="orderId"></el-option>
										<el-option label="订单编号" value="orderNo"></el-option>
										<el-option label="售后单号" value="userName"></el-option>
										<el-option label="支付单号" value="phone"></el-option>
										<el-option label="交易流水号" value="phone"></el-option>
									</el-select>
								</div>
							</template>
						</el-input>
					</el-form-item>
					<el-form-item label="输入查询内容:">
						<el-input>
							<template #prepend>
								<div style="width: 130px; height: 100%">
									<el-select v-model="state.search.userNameType" placeholder="请选择" style="margin: 0; height: 100%">
										<el-option label="用户ID" value="userId"></el-option>
										<el-option label="用户昵称" value="orderNo"></el-option>
										<el-option label="用户手机号" value="userName"></el-option>
										<el-option label="收货人" value="phone"></el-option>
										<el-option label="收货人手机号" value="phone"></el-option>
									</el-select>
								</div>
							</template>
						</el-input>
					</el-form-item>
					<el-form-item label="订单类型:">
						<el-select v-model="state.search.orderType" placeholder="请选择" style="margin: 0; width: 100%">
							<el-option label="全部" value="all"></el-option>
							<el-option label="商城订单" value="orderNo"></el-option>
							<el-option label="积分订单" value="userName"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="订单来源:">
						<el-select v-model="state.search.orderSource" placeholder="请选择" style="margin: 0; width: 100%">
							<el-option label="全部" value="userId"></el-option>
							<el-option label="H5" value="orderNo"></el-option>
							<el-option label="微信公众号" value="userName"></el-option>
							<el-option label="微信小程序" value="phone"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="支付方式:">
						<el-select v-model="state.search.payWay" placeholder="请选择" style="margin: 0; width: 100%">
							<el-option label="全部" value="userId"></el-option>
							<el-option label="微信支付" value="orderNo"></el-option>
							<el-option label="钱包支付" value="userName"></el-option>
							<el-option label="积分支付" value="phone"></el-option>
							<el-option label="货到付款" value="phone"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="活动类型:">
						<el-select v-model="state.search.activityType" placeholder="请选择" style="margin: 0; width: 100%">
							<el-option label="全部" value="userId"></el-option>
							<el-option label="拼团" value="orderNo"></el-option>
							<el-option label="秒杀" value="userName"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="促销类型:">
						<el-select v-model="state.search.promotionType" placeholder="请选择" style="margin: 0; width: 100%">
							<el-option label="全部" value="userId"></el-option>
							<el-option label="满减" value="orderNo"></el-option>
							<el-option label="满折" value="userName"></el-option>
							<el-option label="满邮" value="phone"></el-option>
							<el-option label="满赠" value="phone"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="商品名称:">
						<el-input />
					</el-form-item>
					<el-form-item label="下单时间:">
						<el-date-picker type="datetime" placeholder="选择下单时间" style="width: 100%" />
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
				<div class="dialog-footer mr20 mb20">
					<el-button @click="onCancel" size="large" type="primary">取 消</el-button>
					<el-button @click="search" size="large" type="primary">搜索</el-button>
				</div>
			</template>
		</el-drawer>
	</div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';

const state = reactive({
	show: false,
	search: {
		name: '',
		orderStatus: '',
		orderNameType: 'orderId',
		userNameType: 'userId',
		orderType: '',
		orderSource: '',
		payWay: '',
		activityType: '',
		promotionType: '',
		goodsName: '',
		orderTime: '',
	},
});

const emits = defineEmits(['handleSearch']);

const onCancel = () => {
	state.show = false;
};

const search = () => {
	emits('handleSearch', {});
};

const handleOpen = () => {
	state.show = true;
};

defineExpose({ handleOpen });
</script>

<style scoped lang="scss">
:deep(.el-input-group__prepend) {
	padding: 0px !important;
}
</style>
